<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
			</div>
			<el-form-item label="小区ID" prop="blcok">
				<el-select v-model="queryParams.blcok" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="收费日期" prop="qDate1">
				<el-date-picker v-model="queryParams.qDate1" type="date" value-format="yyyy-MM-dd"
					placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column label="序号" type="index" width="50">
			</el-table-column>
			<el-table-column label="小区名称" align="center" prop="blockName"></el-table-column>
			<el-table-column label="报修总数" align="center" prop="bxgz"></el-table-column>
			<el-table-column label="已完成维修数" align="center" prop="ywc"></el-table-column>
			<el-table-column label="未完成维修数" align="center" prop="wwc"></el-table-column>
			<el-table-column label="小区编码" align="center" prop="blcok"></el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		wxSelectReport
	} from '@/api/wuye.js'
	export default {
		name: "dangriweixiutongji",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					blcok: '',
					qDate1: this.getTodayDate(),
				},
				loading: false,
				list: [],
				total: '',
				options: [{
					value: '花园01',
					label: '花园01'
				}, {
					value: '嘉园02',
					label: '嘉园02'
				}, {
					value: '东苑03',
					label: '东苑03'
				}, {
					value: '景园04',
					label: '景园04'
				}, {
					value: '田园05',
					label: '田园05'
				}, {
					value: '新城06',
					label: '新城06'
				}, {
					value: '南苑07',
					label: '南苑07'
				}],
			};
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			// 当天年月日
			getTodayDate() {
				const today = new Date();
				let date = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today
					.getDate()).slice(-2);
				return date;
			},
			//初始化列表
			getList() {
				this.loading = false;
				wxSelectReport({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},
		}

	}
</script>
<style scoped lang='scss'>

</style>